<template>
  <!-- 催收执行页-历史信息模块-短信历史 -->
  <section class="component record-history">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" ref="form" @handleResetForm="handleResetForm" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="发送人" prop="operatorName">
          <el-input v-model="searchModel.operatorRealName" placeholder="发送人" ></el-input>
        </el-form-item>
        <el-form-item label="发送时间" prop="followInTime">
          <el-date-picker type="daterange" :editable="false" v-model="searchModel.followInTime" placeholder="请选择日期" @change="getDate()" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发送状态" prop="messageStatus">
          <el-select placeholder="请选择" v-model="searchModel.messageStatus" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('MessageStatus')" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标电话" prop="targetMobileNum">
          <el-input v-model="searchModel.targetMobileNum" placeholder="目标电话" >
          </el-input>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box @onPageChange="refreshData" :data="dataSet" :page="pageService" :height="200">
      <template slot="columns">
        <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="operatorRealName" label="发送人" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="createTime" label="发送时间" :min-width="$helper.getColumnWidth(5)">
            <template slot-scope="scope">
            <span>{{scope.row.createTime | dateTimeFormat}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="targetMobileNum" label="目标电话" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="messageStatus" label="发送状态" :min-width="$helper.getColumnWidth(3)" :formatter="(row) => $filter.dictConvert(row.messageStatus, 'MessageStatus')">
        </el-table-column>
        <el-table-column prop="messageContent" label="短信内容" :min-width="$helper.getColumnWidth(10)">
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { Prop } from "vue-property-decorator";
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
import DataBox from '~/components/common/data-box.vue';
import DataForm from '~/components/common/data-form.vue';
import { PageService } from '~/utils/page.service';
import { SortService } from '~/utils/sort.service';
import NumberRange from '~/components/common/number-range.vue';

@Component({
  components: {
    DataBox,
    DataForm,
    NumberRange,
  },
})
export default class MessageHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;

  /**
   * caseId
   */
  @Prop({ type: String, required: true })
  private caseId: string;

  private searchModel: any = {
    operatorRealName: '',
    createTimeMax: '',
    createTimeMin:'',
    messageStatus: '',
    targetMobileNum: '',
  };
  private dataSet: any[] = [];

   //获取信息历史
  private refreshData() {
    this.searchModel.caseId = this.caseId;
    this.searchModel.sendCategory='MESSAGE';
    this.caseOperatorPageService
      .getMessageHistoryContent(this.searchModel,this.pageService)
      .subscribe((data) => {
        this.dataSet = data;
      });
  }

  private activated() {
    this.refreshData()
  }
  private getDate(){
      this.searchModel.createTimeMin=this.searchModel.followInTime[0];
      this.searchModel.createTimeMax=this.searchModel.followInTime[1];
  }
  private handleResetForm() {
    this.searchModel.followInTime =[];
    this.searchModel.operatorRealName='';
    this.searchModel.mobileNo='';
  }

}
</script>

<style lang="less">
</style>